<template>
	<view class="exchange-page">
		<view class="exchange-info">
			<image :src="coursesBuyDetail.image" class="item-left"></image>
			<view class="item-center">
				<view class="item-title">{{coursesBuyDetail.name}}</view>
				<view class="item-score"><text class="unit">￥</text>{{coursesBuyDetail.price}}</view>
			</view>
			<!-- <view class="item-right">
				<view class="button">购买</view>
			</view> -->
		</view>
		<view class="order-detail">
			<view class="title">订单详情</view>
			<view class="order-item">
				<view>商品总价</view>
				<view>￥{{coursesBuyDetail.price||''}}</view>
			</view>
			<view class="order-item">
				<view>优惠券</view>
				<view v-if="coursesBuyDetail.coupon_money"> - ￥{{coursesBuyDetail.coupon_money}}</view>
				<view v-else>无可用优惠券</view>
			</view>
			<view class="order-item">
				<view>合计</view>
				<view style="color: #FD463E;">￥{{coursesBuyDetail.pay_money||''}}</view>
			</view>
		</view>
		<view class="order-detail">
			<view class="title">选择支付方式</view>
			<u-radio-group v-model="pay_type" placement='column'>
				<view class="pay_type">
					<view class="pay_left">
						<image class="image" src="../../static/common/wx.png" mode="widthFix"></image>
						微信支付
					</view>
					<view class="pay_right">
						<u-radio shape="square" activeColor="#A3C616" name="1"></u-radio>
					</view>
				</view>
				<view class="pay_type">
					<view class="pay_left">
						<image class="image" src="../../static/common/jf.png" mode="widthFix"></image>
						积分支付（剩余{{coursesBuyDetail.course_score}}积分）
					</view>
					<view class="pay_right">
						<u-radio shape="square" activeColor="#A3C616" name="2"></u-radio>
					</view>
				</view>
			</u-radio-group>
		</view>
		<view class="order-confirm" @click="$u.throttle(orderConfirm,2000)">确认支付</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				courses_id: null,
				pay_type: null,
				coursesBuyDetail: null,
			}
		},
		onLoad(options) {
			if (options && options.courses_id) {
				this.courses_id = options.courses_id
				this.getCoursesBuyDetail();
			}
		},
		methods: {
			orderConfirm() {
				let that = this
				if (!this.pay_type) {
					return this.$Toast('请选择支付方式')
				}
				if (this.pay_type == 2) {
					// '&coupon_id=' + this.coursesBuyDetail.coupon_id
					return this.$Tips('/pages/order/scoreConfirm?courses_id=' + this.courses_id)
				}
				this.$Api.courses.submitCourseOrder({
					// course_id: this.courses_id,
					pay_type: this.pay_type,
					// coupon_id: this.coursesBuyDetail.coupon_id
				}).then((res) => {
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						package: res.data.package,
						signType: res.data.signType,
						paySign: res.data.paySign,
						success: function(payres) {
							that.$Tips({
								title: '支付成功'
							}, {
								tab: 4,
								url: '/pages/common/paySuccess'
							})
						},
					});

				});
			},
			getCoursesBuyDetail() {
				this.$Api.courses.getCoursesBuyDetail({
					id: this.courses_id,
				}).then((res) => {
					this.coursesBuyDetail = res.data;
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.exchange-page {
		width: 100%;
		background: #F6F6F8;
		padding-top: 20rpx;

		.exchange-info {
			margin: 0rpx 30rpx 20rpx;
			border-radius: 28rpx;
			padding: 20rpx;
			display: flex;
			align-items: center;
			background: #ffffff;
			box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0, 0, 0, 0.1), inset 0rpx 2rpx 2rpx 0rpx #FFFFFF;

			.item-left {
				width: 156rpx;
				height: 156rpx;
				margin-right: 26rpx;
			}

			.item-center {
				flex: 1;
				height: 156rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.item-title {
					font-weight: bold;
					font-size: 32rpx;
				}

				.item-score {
					font-weight: bold;
					font-size: 40rpx;
					color: #FD463E;

					.unit {
						font-size: 28rpx;
						color: #FD463E;
					}
				}
			}

			.item-right {
				height: 156rpx;
				display: flex;
				flex-direction: column;
				justify-content: flex-end;

				.button {
					width: 112rpx;
					height: 56rpx;
					color: #FFFFFF;
					font-weight: bold;
					font-size: 28rpx;
					line-height: 56rpx;
					text-align: center;
					border-radius: 44rpx;
					box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(162, 198, 22, 0.3);
					background: linear-gradient(90deg, #C1ED1F 0%, #A3C616 100%);
				}
			}
		}

		.order-detail {
			background: #ffffff;
			border-radius: 28rpx;
			margin: 0rpx 30rpx 22rpx;
			padding: 30rpx 26rpx;
			box-sizing: border-box;

			.title {
				font-size: 32rpx;
				border-bottom: 1px #e6e5e5 solid;
				padding-bottom: 28rpx;
				font-weight: bold;
			}

			.order-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				margin-top: 26rpx;
			}

			.pay_type {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				margin-top: 26rpx;

				.pay_left {
					display: flex;
					align-items: center;
				}

				.image {
					width: 52rpx;
					margin-right: 16rpx;
				}
			}
		}

		.order-confirm {
			margin: 140rpx 30rpx 0;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			font-weight: bold;
			font-size: 34rpx;
			color: #ffffff;
			background: #a3c616;
			box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(163, 198, 22, 0.3);
			border-radius: 24rpx;
		}
	}
</style>